import React, { useEffect } from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeTabs from "./home-tabs";
import Icon from '@/assets/iconfont/index';
import Listen from "@/pages/listen";
import Found from "@/pages/found";
import Account from "@/pages/account";
import Play from "@/pages/views/play";
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
const Tab = createBottomTabNavigator();

function getHeaderTitle(route) {
    const routeName = getFocusedRouteNameFromRoute(route)

    switch (routeName) {
        case 'HomeTabs':
            return '首页';
        case 'Listen':
            return '我听';
        case 'Found':
            return '发现';
        case 'Account':
            return '账户';
        default:
            return '首页';
    }
}


function BottomTabs(props) {
    const { navigation, route } = props;


    const setOptions = () => {
        const routeName = getFocusedRouteNameFromRoute(route);
        if (!routeName || routeName === 'HomeTabs') {
            navigation.setOptions({
                headerTransparent: true,
                headerTitle: '',
            });
        } else {
            navigation.setOptions({
                headerTransparent: false,
                headerTitle: getHeaderTitle(route),
            });
        }
    }

    useEffect(() => {
        setOptions()
    })
    return (
        <Tab.Navigator
            screenOptions={{
                activeTintColor: "#f86442",
                headerShown: false
            }}
        >
            <Tab.Screen
                name="HomeTabs"
                component={HomeTabs}
                options={{
                    tabBarLabel: "首页",
                    tabBarIcon: ({ color, size }) => <Icon name="icon-shouye" size={size} color={color} />
                }}
            />
            <Tab.Screen
                options={{
                    tabBarLabel: "我听",
                    tabBarIcon: ({ color, size }) => <Icon name="icon-shoucang" size={size} color={color} />
                }}
                name="Listen"
                component={Listen}
            />
            <Tab.Screen
                name="Play"
                component={Play}
                options={({ navigation }) => ({
                    tabBarButton: () => {
                        return <Play onPress={() => navigation.navigate('Detail')} />
                    }
                })}
            />
            <Tab.Screen
                options={{
                    tabBarLabel: "发现",
                    tabBarIcon: ({ color, size }) => <Icon name="icon-faxian" size={size} color={color} />
                }}
                name="Found"
                component={Found}
            />
            <Tab.Screen
                options={{
                    tabBarLabel: "账户",
                    tabBarIcon: ({ color, size }) => <Icon name="icon-user" size={size} color={color} />
                }}
                name="Account"
                component={Account}
            />
        </Tab.Navigator>
    );
}

export default BottomTabs